<template>
  <el-pagination
    :layout="layout"
    :class="className"
    :page-size="pageSize"
    :background="background"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'

import { usePage } from '@/configs/pageObj'

defineProps({
  className: {
    type: String,
    default: 'page-block',
  },
  pageSize: {
    type: Number,
    default: usePage().pageSize,
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next',
  },
  background: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['pagination'])

const handleSizeChange = () => {
  emits('pagination')
}
const handleCurrentChange = () => {
  emits('pagination')
}
</script>
